<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/plugins/layui/dist/css/layui.css" rel="stylesheet"/>
    <link href="/css/common/common.css" rel="stylesheet"/>
</head>
<body>
    <div style="padding: 20px; background-color: #F2F2F2;">

        <!--搜索框容器-->
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form-item search-bar">
                    <div class="layui-inline">
                        <label class="layui-form-label">搜索条件：</label>
                        <div class="layui-input-inline">
                            <input id="searchStr" type="text" class="layui-input" placeholder="请输入功能名称">
                        </div>
                        <div class="layui-input-inline">
                            <button id="function_search_btn" class="layui-btn">搜索</button>
                            <button id="reset_search_btn" class="layui-btn layui-btn-primary" type="reset">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--数据表容器-->
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form-item search-bar">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <button id="add_function_btn" class="layui-btn">
                                <i class="layui-icon">&#xe608;</i> 添加
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item search-bar">
                    <table id="function_table" class="layui-table" lay-filter="function_filter"></table>
                </div>
                <!--分页组件容器-->
                <div id="function_table_page_content"></div>
            </div>
        </div>

    </div>

    <!--toolbar-->
    <script id="function_table_tool_bar" type="text/html">
        <a class="layui-btn layui-btn-xs" lay-event="updateFunction">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteFunction">删除</a>
    </script>

    <div id="addFunctionDialog" style="display: none; margin-top: 100px;">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-md8 layui-col-md-offset2" style="margin-bottom: 15px;">
                        <label class="layui-form-label" style="width: 80px;"><span style="color: red;">*</span>功能名称：</label>
                        <div class="layui-input-block">
                            <input id="add_functionName" type="text" placeholder="请输入功能名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-md8 layui-col-md-offset2" style="margin-bottom: 15px;">
                        <label class="layui-form-label" style="width: 80px;"><span style="color: red;">*</span>功能编码：</label>
                        <div class="layui-input-block">
                            <input id="add_functionRight" type="text" placeholder="请输入功能编码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-md8 layui-col-md-offset2" style="margin-bottom: 15px;">
                        <label class="layui-form-label" style="width: 80px;"><span style="color: red;">*</span>功能状态：</label>
                        <div class="layui-input-block">
                            <select id="add_functionState" value="0">
                                <option value="0">启用</option>
                                <option value="1">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md8 layui-col-md-offset2 layui-inline" style="margin-bottom: 15px;">
                        <label class="layui-form-label" style="width: 80px;"><span style="color: red;">*</span>功能类型：</label>
                        <div class="layui-input-block">
                            <select id="add_functionType" value="0">
                                <option value="0">菜单</option>
                                <option value="1">其他</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="updateFunctionDialog" style="display: none; margin-top: 100px;">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-row">
                    <input id="update_functionId" type="hidden" class="layui-input">
                    <div class="layui-col-md8 layui-col-md-offset2" style="margin-bottom: 15px;">
                        <label class="layui-form-label" style="width: 80px;"><span style="color: red;">*</span>功能名称：</label>
                        <div class="layui-input-block">
                            <input id="update_functionName" type="text" placeholder="请输入功能名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-md8 layui-col-md-offset2" style="margin-bottom: 15px;">
                        <label class="layui-form-label" style="width: 80px;"><span style="color: red;">*</span>功能编码：</label>
                        <div class="layui-input-block">
                            <input id="update_functionRight" type="text" placeholder="请输入功能编码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-md8 layui-col-md-offset2" style="margin-bottom: 15px;">
                        <label class="layui-form-label" style="width: 80px;"><span style="color: red;">*</span>功能状态：</label>
                        <div class="layui-input-block">
                            <select id="update_functionState">
                                <option value="0">启用</option>
                                <option value="1">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md8 layui-col-md-offset2 layui-inline" style="margin-bottom: 15px;">
                        <label class="layui-form-label" style="width: 80px;"><span style="color: red;">*</span>功能类型：</label>
                        <div class="layui-input-block">
                            <select id="update_functionType">
                                <option value="0">菜单</option>
                                <option value="1">其他</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/plugins/jquery/jquery-2.2.4.min.js"></script>
    <script src="/plugins/layui/dist/lay/modules/layer.js"></script>
    <script src="/plugins/layui/dist/layui.js"></script>
    <script src="/js/common/sinoUtil.js"></script>
    <script src="/js/system/function.js"></script>
</body>
</html>